<template>
    <el-row :span="24" class="col">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">门店名称</el-col>
        <el-col :span="20"><el-input v-model="mendian.shopName"></el-input></el-col>
    </el-row>
    <el-row :span="24" class="col" style="margin: 20px;">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">门店头像</el-col>
        <el-col :span="20"><el-input v-model="mendian.shopImage"></el-input></el-col>
    </el-row>
    <el-row :span="24" class="col">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">门店手机号</el-col>
        <el-col :span="20"><el-input v-model="mendian.shopPhone"></el-input></el-col>
    </el-row>
    <el-row :span="24" class="col" style="margin: 20px 0;">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">所属地区</el-col>
        <el-col :span="20">
            <el-row style="margin-bottom: 20px;">
                <el-col :span="24">
                    <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange" />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><el-input v-model="mendian.shopAddress"></el-input></el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row :span="24" class="col">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">门店坐标</el-col>
        <el-row :span="20">
            <el-col :span="4"><el-button @click="getlocation">获取位置</el-button></el-col>
            <el-col :span="12" style="padding:10px 0;margin-left: 80px;">{{ weizhi }}</el-col>
        </el-row>
    </el-row>
    <el-row :span="24" class="col">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">营业时间</el-col>
        <el-col :span="20"><el-input v-model="mendian.shopDescribe"></el-input></el-col>
    </el-row>
    <el-row :span="24" class="col" style="margin: 20px 0;">
        <el-col :span="3" :offset="20">
            <el-button type="primary" @click="save">确认保存</el-button></el-col>
    </el-row>
</template>

<script setup>
import { ref, defineEmits,defineProps } from "vue";
import { regionData, codeToText } from "element-china-area-data";
import axios from "axios";

const options = ref(regionData);
const selectedOptions = ref([]);
let weizhi = ref("");

let props = defineProps({
    data:{
        type:Object
    }
});

let mendian = ref({
    ...props.data
});

// const address = ref("");
const emits = defineEmits(["operate"]);
const save = function () {
    emits("operate", {data:mendian.value,name:"modifyShop"});
}

const handleChange = () => {
    mendian.value.shopProvince = codeToText[selectedOptions.value[0]];
    mendian.value.shopCity = codeToText[selectedOptions.value[1]];
    mendian.value.shopDistrict = codeToText[selectedOptions.value[2]];
    mendian.value.formatted_address = mendian.value.shopProvince + mendian.value.shopCity + mendian.value.shopDistrict;
}

const getlocation = async function () {
    let res = await axios.get(`https://restapi.amap.com/v3/geocode/geo?key=457886b5972a97e93fb9cdccebfd450f&address=${mendian.value.formatted_address + mendian.value.shopAddress }`);
    weizhi.value = res.data.geocodes[0].location;
    if (res.data.geocodes[0].location) {
        mendian.value.communityLatitude = res.data.geocodes[0].location.split(",")[0];
        mendian.value.communityLongitude = res.data.geocodes[0].location.split(",")[1];
    }

}

// watchEffect(function(){
// })
</script>

<style lang="less" scoped></style>